<template>
  <div>
    <el-row style="margin-top: 30px">
      <el-col>
        <el-row>
          <el-col :span="2" :offset="1">
            <el-button @click="dialogFormVisible = true" style="width: 120px;font-size: 15px" type="primary"
                       size="medium" icon="el-icon-folder-add" round>新建课程
            </el-button>
            <el-dialog center top="20px" title="新建课程" :visible.sync="dialogFormVisible" width="600px">
              <el-form :model="course" label-width="70px" ref="mainForm">
                <el-form-item label="课程名称">
                  <el-input v-model="course.courseName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程学时">
                  <el-input v-model="course.coursePeriod" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程学分">
                  <el-input v-model="course.coursePoint" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-date-picker
                    style="width: 490px"
                    v-model="course.courseEndTime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="课程简介">
                  <el-input
                    type="textarea"
                    :rows="3"
                    v-model="course.courseContent">
                  </el-input>
                </el-form-item>
                <el-form-item label="默认封面">
                  <el-col :span="10">
                    <el-image :src="src">
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </el-col>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCourse" style="margin-left: 80px">完 成</el-button>
              </div>
            </el-dialog>
          </el-col>
          <el-col :span="3" :offset="16">
            <el-input
              placeholder="请输入课程名称"
              size="small"
              suffix-icon="el-icon-search"
              v-model="condition"
              @input="search"
              clearable>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <div v-for="(item,index) in courseList" :key="index">
            <el-col :span="4"  style="margin-top: 25px;margin-left: 40px">
              <el-card class="box-card" shadow="hover" :body-style="{textAlign:'left'}"
                       @click.native="toCourseDetails(item.courseId)">
                <div slot="header">
                  <span style="font-weight: bolder">{{ item.courseName }}</span>
                </div>
                <div>
                  <el-image :src="src">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </div>
                <div style="margin-top: 10px;font-weight: bolder">学时: <span style="color: #888">{{
                    item.coursePeriod
                  }}</span></div>
                <div style="margin-top: 10px;font-weight: bolder">学分: <span style="color: #888">{{
                    item.coursePoint
                  }}</span></div>
                <div style="margin-top: 10px;font-weight: bolder">课程状态: <span
                  style="color: #888">{{ item.courseStatus === 1 ? '上课中' : '已结束' }}</span></div>
                <div style="margin-top: 10px;font-weight: bolder">结束时间: <span style="color: #888">{{
                    item.courseEndTime
                  }}</span></div>
                <div
                  style="margin-top: 10px;font-weight: bolder;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                  课程简介:<span style="color: #888"> {{ item.courseContent }}</span></div>
              </el-card>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'adminIndex',
  data () {
    return {
      dialogFormVisible: false,
      src: require('../../assets/fengmian.jpg'),
      courseList: {},
      course: {
        courseId: '',
        courseEndTime: '',
        courseName: '',
        coursePoint: '',
        coursePeriod: '',
        courseContent: '',
      },
      condition:'',
    }
  },
  methods: {
    search(){
      this.init()
    },
    saveCourse () {
      this.$http.post('/api/course', {
        courseName: this.course.courseName,
        coursePoint: this.course.coursePoint,
        courseEndTime: this.course.courseEndTime,
        coursePeriod: this.course.coursePeriod,
        courseContent: this.course.courseContent,
      }).then((res) => {
        if (res.data.code === 2000) {
          this.init()
          this.$notify.success({
            title: '成功',
            message: '添加课程成功',
            duration: 1000
          })
        } else {
          this.$notify.error({
            title: '失败',
            message: '添加课程失败，请重新添加',
            duration: 1000
          })
        }
        this.dialogFormVisible = false
        this.course = {
          courseName: '',
          coursePoint: '',
          coursePeriod: '',
        }
      })
    },
    toCourseDetails (courseId) {
      this.$router.push({
        path: '/course',
        query: {
          courseId: courseId,
        }
      })
    },
    init () {
      this.$http({
        url: '/api/course/list',
        method: 'get',
        params:{
          condition:this.condition
        }
      }).then(res => {
        if (res.data.code === 4040) {
          this.courseList = res.data.result
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: '获取信息失败！',
            center: true,
          })
        }
      })
    },
  },
  created () {
    this.init()
  }
}
</script>

<style scoped>

</style>
